.featured {
    background-color: #171a25;
    color: white;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 90px;
    width: 100%;
    height: auto;
  }



/* Individual adjustments for each image */
#img-1 {
  width: 20%; /* Adjust image size */
  position: relative;
  top: 0px; /* Adjust vertical position */
  left: 0px; /* Adjust horizontal position */
  justify-content: left;
}

#img-2 {
  width: 100%; /* Adjust image size */
  position: relative;
  top: 40px;
  left: 0;
}

#img-3 {
  width: 100%;
  position: relative;
  top: 80px;
  left: 0px;
}

#img-4 {
  width: 100%; /* Full width */
  position: relative;
  top: 60px;
  left: 0px;
}

#img-5 {
  width: 100%;
  position: relative;
  top: 100px;
  left: 0px;
}

#img-6 {
  width: 100%;
  position: relative;
  top: 140px;
  left: 0;
}

/* Media query to stack grid items on smaller screens */
@media (max-width: 768px) {
  .grid-container {
      grid-template-columns: 1fr; /* Stack items in a single column */
      grid-template-rows: repeat(6, auto);
      margin-bottom: 5%;
      margin-top: 5%;
  }

  #img-1{
    width: 80%;
    height: auto;
  }
}

#img-1:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-2:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-3:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-4:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-5:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#img-6:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.8; /* Slight opacity change */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

#directory{
    color: #fff;
    margin-left: 110px;
    margin-top: 5%;
    margin-bottom: 5%;
  }
  
  #directory span{
    color: #4170ff;
    margin-left: 0;
  }
  
  @media only screen and (max-width: 768px) {
    #directory{
      font-size: 2.3vw;
      margin-left: 11%;
    }
  }

  #ST-head{
    font-size: 90px; 
  }

  @media only screen and (max-width: 768px) {
    #ST-head{
      font-size: 54px;
      padding-top: 2%;
    }
  }

  .custom-link {
    color: white;         /* Changes the font color to white */
    text-decoration: none; /* Removes the underline */
}

.custom-link:hover {
  color: lightgray;           /* Changes color on hover */
}